import React, { useEffect, useState } from 'react';
import '../../../scss/fp/shoppingcart.scss'

import  Jiatable  from "../../../components/fpfengzhuang/Jiatable";

import { shoppingggg_list } from "../../../tools/api";
import { shoppingcart_datadelete , shoppingcart_search} from "../../../tools/api";

import { message } from "antd";

import axios from 'axios';

import { Button, Drawer, Radio, Space } from 'antd';

function Shoppingcart(props) {
    
    var [ list , setList ] = useState();
    useEffect(() => {
       //-----🍌---🍌---🍌-----
       shoppingggg_list().then(
            response => {
                //  console.log( response.data ) 
                 setList(response.data)
            }
       )
    },[])
    
    // 更新组件函数
    const upData = () => {
       //-----🍈---🍈---🍈-----
       shoppingggg_list().then(
        response => {
            //  console.log( response.data ) 
             setList(response.data)
        }
   )
    }


    var [ search , setSearch ] = useState('')
    const wwwData = (e) => {
       //-----🍈---🍈---🍈-----
       setSearch(e.target.value)
    }
        
    // 模糊搜素
    const downData = () => {    
    //    -----🍌---🍌---🍌-----
    //    console.log(list);  
       shoppingcart_search( search ).then(
          response => { 
            //   setList(response.data)
            // console.log(response.data);
            setList(response.data)
           }
       )
    }
    
    // 删除商品
    const shoppingcartClick = (record) => {
       //-----🍌---🍌---🍌-----
        // console.log(record.id);    
            shoppingcart_datadelete( record.id ).then(
                response => {
                     message.open({ type: 'success', content: '删除成功!' });
                     upData()
                }
            )
    }
    //*-------------------------------------------☃️-----编辑相关代码-----☃️-------------------------------------------
    
    
    var [ callect , setCallect ] = useState()

    // 输入框解构
    var [ shangpinbianhao , setShangpinbianhao ] = useState('')
    var [ shopping , setShopping ] = useState('')
    var [ shommimg , setShommimg ] = useState('')
    var [ jiage , setJiage ] = useState('')
    var [ brand , setBrand ] = useState('')
    var [ commodity , setCommodity ] = useState('')
    var [ status , setStatus ] = useState('')
    var [ shoppingstatus , setShoppingstatus ] = useState('')

    // 测试 编辑数据
    const callectData = (record) => {
        //-----🍈---🍈---🍈-----
        // console.log(record.id);
        setCallect(record)
        setShangpinbianhao(record.shangpinbianhao)
        setShopping(record.shopping)
        setShommimg(record.shommimg)
        setJiage(record.jiage)
        setBrand(record.brand)
        setCommodity(record.commodity)
        setStatus(record.status)
        setShoppingstatus(record.shoppingstatus)
    }

    

    // 一些没必要写这么麻烦的代码，后期会优化
    const callectSet1 = (e) => {
       //-----🍈---🍈---🍈-----
       setShangpinbianhao(e.target.value)
    }
    const callectSet2 = (e) => {
       //-----🍈---🍈---🍈-----
       setShopping(e.target.value)
    }
    const callectSet3 = (e) => {
       //-----🍈---🍈---🍈-----
       setShommimg(e.target.value)
    }
    const callectSet4 = (e) => {
       //-----🍈---🍈---🍈-----
       setJiage(e.target.value)
    }
    const callectSet5 = (e) => {
       //-----🍈---🍈---🍈-----
       setBrand(e.target.value)
    }
    const callectSet6 = (e) => {
       //-----🍈---🍈---🍈-----
       setCommodity(e.target.value)
    }
    const callectSet7 = (e) => {
       //-----🍈---🍈---🍈-----
       setStatus(e.target.value)
    }
    const callectSet8 = (e) => {
       //-----🍈---🍈---🍈-----
       setShoppingstatus(e.target.value)
    }

    // 完成编辑
    const accopimleData = () => {
       //-----🍈---🍈---🍈-----
    //    console.log(callect.id);
       axios.patch(`http://localhost:4000/shoppppingcart/${ callect.id }`, { shangpinbianhao , shopping , shommimg , jiage , brand , commodity , status , shoppingstatus  }).then(
           response => {  
                upData(); onClose() ;  
                message.open({ type: 'success', content: '编辑成功!' });
        }
       )
    }

    //*-------------------------------------------☃️-----编辑相关代码-----☃️-------------------------------------------


   //*-------------------------------------------☃️-----弹框-----☃️-------------------------------------------
   
   const [open, setOpen] = useState(false);
   const [placement, setPlacement] = useState('bottom');

   const showDrawer = () => {
       setOpen(true);
    };
    const onClose = () => {
        setOpen(false);
    };
    const onChange = (e) => {
        setPlacement(e.target.value);
    };
    
    //*-------------------------------------------☃️-----弹框-----☃️-------------------------------------------
    return (
        <>
            <div className='shoppingcart'>
                <div className="shoppingcart_top">
                    <div className="shoppingcart_top_top">
                        <div>
                            <span>商品编号</span>&nbsp;&nbsp;&nbsp;
                            <input value={ search } onChange={ wwwData } onKeyDown={ downData } className='inp' type="text" placeholder='请输入商品名称' />
                        </div>
                        <div>
                            <span>商品名称</span>&nbsp;&nbsp;&nbsp;
                            <input  className='inp' type="text" placeholder='请输入商品价格' />
                        </div>
                        <div>
                            <span>商品品牌</span>&nbsp;&nbsp;&nbsp;
                            <input  className='inp' type="text" placeholder='请输入商品品牌' />
                        </div>
                        <div>
                            <span>商品状态</span>&nbsp;&nbsp;&nbsp;
                            <input  className='inp' type="text" placeholder='上架' />
                        </div>
                    </div>
                    <div className="shoppingcart_top_bottom">
                    <Space>
                        <Radio.Group  value={placement} onChange={onChange}>
                            <Radio value="bottom" style={{display:'none'}}>bottom</Radio>
                        </Radio.Group>
                    </Space>

                    <Drawer
                        title="编辑"
                        placement={placement}
                        closable={false}
                        onClose={onClose}
                        open={open}
                        key={placement}
                    >
                {
                    <>
                        <div className="calle">
                            <input type="text" onChange={ callectSet1 } value={ shangpinbianhao }/>
                            <input type="text" onChange={ callectSet2 } value={ shopping }/>
                            <input type="text" onChange={ callectSet3} value={ shommimg }/>
                            <input type="text" onChange={ callectSet4 } value={ jiage }/>
                        </div>

                        <div className="calle">
                            <input type="text" onChange={ callectSet5 } value={ brand }/>
                            <input type="text" onChange={ callectSet6 } value={ commodity }/>
                            <input type="text" onChange={ callectSet7 } value={ status }/>
                            <input type="text" onChange={ callectSet8 } value={ shoppingstatus }/>
                        </div>

                        <div className="gocallect">
                            <Button type="primary" onClick={ accopimleData }>确认编辑</Button>
                        </div>
                   </>
                }
                    </Drawer>
                    
                    </div>
                </div>

                <Jiatable 

                  shoppingcartClick={ shoppingcartClick }
                  callectData={ callectData }
                  showDrawer={ showDrawer }
                  downData={ downData }

                  top1={ '商品编号' }
                  top2={ '商品名称' }
                  top3={ '商品' }
                  top4={ '商品价格' }
                  top5={ '商品品牌' }
                  top6={ '商品属性' }
                  top7={ '库存状态' }
                  top8={ '商品状态' }
                  
                  index1={ 'shangpinbianhao' }
                  index2={ 'shopping' }
                  index3={ 'shommimg' }
                  index4={ 'jiage' }
                  index5={ 'brand' }    
                  index6={ 'commodity' }
                  index7={ 'status' }
                  index8={ 'shoppingstatus' }
                  
                  btn1={ '编辑' }
                  btn2={ '下架' }

                  dataSource={ list }
                />
            </div>
        </>
    );
}

export default Shoppingcart;